<script setup name="App" lang="ts">
import { Ref, ref } from 'vue';
const count = ref<number>(10)
// !下面写法了解，面试可能要知道
// const count: Ref<number> = ref(10)
// 泛型参数就规定了初始值的类型，一般情况可以借助类型推导省略
// const count = ref(10)

// 给了初始值，确实可以自动推导出来类型，但不好
// const data = ref([{ id: 1, name: 'xxx', done: true }])

interface IItem { id: number; name: string; done: boolean }
const data = ref<IItem[]>([])
// const data: Ref<IItem[]> = ref([])

setTimeout(() => {
  data.value = [{
    id: 1,
    name: '吃饭',
    done: false
  },
  {
    id: 2,
    name: '睡觉',
    done: true
  }
  ]
}, 1000)

</script>
<template>
  <ul>
    <li v-for="item in data" :key="item.id">{{ item.name }}</li>
  </ul>
</template>
